<template>
<!-- 递归组件 -->
  <div class="detail">
    <ul v-for="(item ,index) in detaillist" :key="index">
      <!-- 父菜单 -->
      <li class="detail-list">
        <div class="detail-listBg" @click.native="routerClick()"></div>
        {{item.title}}
      </li>
      <!-- 一级子菜单 -->
      <ul v-if="item.children" class="linkage">
        <detail-list :detaillist="item.children" @click.native="routerClick()"></detail-list>
      </ul>
    </ul>
  </div>
</template>
<script>
export default {
  name: "detailList",
  props: {
    detaillist: Array
  },
  methods:{
    routerClick(){
      this.$router.push({
        path:'/detailList',
      })
    }
  }
};
</script>
<style scoped>
.detail {
  width: 100%;
  overflow: hidden;
}
.detail .detail-list {
  width: 100%;
  height: 44px;
  line-height: 44px;
  border-bottom: 1px solid #eeeeee;
  /* border-width: thin; */
  font-size: 14px;
  color: #666;
  text-indent: 5px;
  display: flex;
  /* justify-content: center; */
}
.detail .detail-list .detail-listBg {
  width: 22px;
  height: 22px;
  position: relative;
  top: 12px;
  left: 2px;
  margin-right: 5px;
  background: url("http://s.qunarzz.com/piao/image/touch/sight/detail.png")
    no-repeat;
  background-size: 22px;
}
.detail .detail-list-content {
  display: flex;
  flex: 1;
  width: 100%;
  height: 44px;
  justify-content: space-between;
}
/* .detail .detail-list-content span{
    text-indent: 4px;
    height: 44px;
    text-align: right;
    font-size:14px;
    color: #666;
} */
/* .detail .detail-list-content span:nth-child(2){
    background: red;
    margin-left:10px;
    text-align: right !important;
} */
.detail .linkage{
    padding-left:15px;
}
</style>